<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8>
    <meta http-equiv=X-UA-Compatible content="IE=edge">
    <meta name=viewport content="width=device-width,initial-scale=1,user-scalable=no">
    <meta name=x5-orientation content=portrait>
    <meta name=screen-orientation content=portrait>
    <title>贺卡</title>
    <link rel="stylesheet" href="{SITE_URL}app/{$GLOBALS['TS_URL']['app']}/css/card{$tplid}.css">
    <script type="text/javascript" src="{SITE_URL}public/js/rem.js"></script>
    <script type="text/javascript" src="{SITE_URL}public/js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="{SITE_URL}public/js/html2canvas.js"></script>
    <script type="text/javascript" src="{SITE_URL}public/js/smatchScreen.js"></script>
    <script type="text/javascript" src="{SITE_URL}public/js/jquery.qrcode.min.js"></script>
    <link rel="stylesheet" href="{SITE_URL}public/font-awesome/css/font-awesome.min.css">
</head>
<body>
<!--画报-->
<div class="poster" data-id="poster">
    <div class="container" data-id="container">
        <div class="word-box" style="text-align: left;margin-left: 60px;padding-left:5px;padding-right:5px;color:#ffffff;font-family: 宋体;padding-top: 30px ">


                <p>亲爱的{$toUser['username']}：</p>
                <p style="text-indent:2em">{$content}</p>


                <p style="text-align: right">$GLOBALS['TS_USER']['username']</p>
                <p style="text-align: right">{php echo date('Y-m-d',$sendtime)}</p>




    </div>
        <form method="POST" action="{tsUrl('user','message',array('ts'=>'addcard','touserid'=>$touserid))}">
        <div style="position:absolute;left:20px;top:1260px;">

            <input type="hidden" name="content" value="{$content}" />
            <input type="hidden" name="tplid" value="{$tplid}" />
            <input type="hidden" name="sendtime" value="{$sendtime}" />
            <input type="hidden" name="token" value="{$_SESSION['token']}" />


        <button  type="submit" style=" border-radius: 15px;width: 160px;height:60px;font-size: 30px;color:#ffffff;background-color: #66aa66">返回修改</button>
        </div>
            </form>
    <form  id='form1' method="POST" action="{tsUrl('user','message',array('ts'=>'sendcard'))}">
        <div style="position:absolute;left:560px;top:1260px;">


            <input type="hidden" name="touserid" value="{$touserid}" />
            <input type="hidden" name="content" value="{$content}" />
            <input type="hidden" name="tplid" value="{$tplid}" />
            <input type="hidden" name="sendtime" value="{$sendtime}" />
            <input type="hidden" name="token" value="{$_SESSION['token']}" />

            <button type="submit" style=" border-radius: 15px;width: 160px;height: 60px;font-size: 30px;color:#ffffff;background-color: #66aa66">提交贺卡</button>
        </div>
    </form>
</div>


<script>
    //兼容火狐、IE8
    //显示遮罩层
    function showMask(){
        $("#mask").css("height",$(document).height());
        $("#mask").css("width",$(document).width());
        $("#mask").show();
    }
  $(function () {
    // 初始化一屏幕的高度
    var clientHeight = document.documentElement.clientHeight;
    $("[data-id='poster']").css({height:clientHeight+'px'});
    // 缩放图片
    SmatchScreen($("[data-id='container']").get(0), 'v-v', 750, 1334, false, false);

    // 此处是生成图片
    window.onload=function(){
      var screenRate = clientHeight / 1334
      html2canvas($("[data-id='container']").get(0),{
        useCORS:true,
        width:750*screenRate,
        height:1334*screenRate
      }).then(canvas => {
        var imgUrl = canvas.toDataURL();
        $('[data-id="image"]').attr('src',imgUrl)
      });
    }
  });

  $(function(e){
      $('#form1').on('submit', function(e) {
          showMask();
      });

  });


</script>
</body>
</html>